import {Component} from 'react';
import style from './index.css';
import theme from './../Css/theme'; //主题色

// 插件部分
import {Menu, Avatar} from 'antd';

// 页面头部导航栏
export default class Head extends Component {
  constructor (props) {
    super (props);
    this.state = {
      MenuList: [
        {
          lable: '绩效考核',
        },
        // {
        //   lable: '设置',
        // },
      ], //切换的选项
      current: '0', //当前切换的选项
    };
  }
  // 切换方法
  handleClick = e => {
    this.setState ({
      current: e.key,
    });
  };

  render () {
    return (
      <div
        style={{backgroundColor: theme.backgroundColor}}
        className={`${style.head_box} cenBet`}
      >
        {/* 左边部分 */}
        <div className={style.head_left}>
          <Menu
            style={{
              color: theme.textColor,
              backgroundColor: theme.backgroundColor,
              lineHeight: '66px',
            }}
            onClick={this.handleClick}
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['1']}
            selectedKeys={[this.state.current]}
          >
            {this.state.MenuList.map ((item, index) => {
              return (
                <Menu.Item style={{height: 66}} key={index}>
                  {item.lable}
                </Menu.Item>
              );
            })}
          </Menu>
        </div>
        {/*右侧部分 */}
        <div className={`${style.head_right} cenCen`}>
          <div className={style.logo_title}>
            考核后台管理系统
          </div>
          <Avatar style={{backgroundColor: theme.textColor}} icon="user" />
        </div>
      </div>
    );
  }
}
